<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { getMenu } from "@/api/modules/org/manager-service";

const props = defineProps({
  showCheckbox: {
    type: Boolean,
    default: false
  }
});

const appMenuTreeRef = ref();

const AppMenuTreeState = reactive({
  props: {
    label: "text",
    children: "children"
  },
  treeData: [],
  /**异步树加载 */
  loadNode: () => {
    getMenu().then((res: any) => {
      AppMenuTreeState.treeData = res.data;
    });
  }
});

defineExpose({
  getCheckedNodes: () => appMenuTreeRef.value.getCheckedNodes(),
  loadTree: () => AppMenuTreeState.loadNode()
});
</script>
<template>
  <el-tree
    ref="appMenuTreeRef"
    highlight-current
    :show-checkbox="showCheckbox"
    :data="AppMenuTreeState.treeData"
    node-key="id"
    :props="AppMenuTreeState.props"
    :default-expanded-keys="['10000']"
    class="app-menu-tree-no-bubtton.el-tree"
  />
</template>

<style>
.app-menu-tree-no-bubtton.el-tree {
  height: calc(80vh - 180px);
  overflow: auto;
}
</style>
